﻿#loginScreen {
    z-index: 1500;
    background-color: white;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    overflow: hidden;
}

.login-head {
    height: 150px;
    width: 100%;
    padding-top: 10px;
    text-align: right;
    vertical-align: middle;
}

.login-colorbar {
    position: absolute;
    right: 380px;
    width: 180px;
    top: 0px;
    background-color: black;
    height: 20px;
    /*Flexbox*/
    /*wc3*/
    display: flex;
    align-items: stretch;
    /*old webkit*/
    display: -webkit-box;
    /*moz*/
    display: -moz-box;
    -moz-box-align: stretch;
    /*ie*/
    display: -ms-flexbox;
    /*position*/
}

.colorbar-element {
    width: 60px;
}

.cc-logo {
    background-repeat: no-repeat;
    background-size: contain;
    height: 150px;
    width: 350px;
    left: 20px;
    position: absolute;
}

@media all and (max-width: 799px) {
    .login-caption {
        display: none;
    }

    .login-colorbar {
        display: none;
    }

    .login-head {
        text-align: center;
    }

    .cc-logo {
        position: relative;
        left: 0px;
    }
}

@media all and (min-width: 800px) {
    .login-caption {
        color: rgb(97, 97, 97);
        font-size: 28px;
        margin-right: 20px;
    }
}

.login-title {
    margin-top: 40px;
    top: 20px;
    display: block;
    font-size: 32px;
}

.login-tiles {
    /*Flexbox*/
    /*wc3*/
    display: flex;
    align-items: center;
    /*old webkit*/
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    /*moz*/
    display: -moz-box;
    -moz-box-align: center;
    /*ie*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    /*position*/
    position: absolute;
    right:0px;
    bottom: 200px;
    top: 180px;
    left: 0px;
    z-index:1;
}

.tile {
    height: 100%;
    max-height: 325px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    color: white;
    -ms-overflow-style: none;
}

.tile-header {
    text-align: left;
    margin: 5px;
    font-weight: bold;
    font-size: 21px;
}

@media all and (max-width: 799px) {
    .login-tiles {
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        -webkit-box-orient: vertical;
        flex-direction: column;
        overflow-y: auto;
    }

    .tile {
        margin: 15px;
        width: 395px;
        min-height: 325px;
    }
}

@media all and (min-width: 800px) and (max-width: 1281px) {
    .login-tiles {
        -ms-flex-pack: distribute;
        -webkit-box-pack: justify;
        justify-content: space-around;
        -moz-box-pack: space-around;
        -webkit-box-direction: normal;
        -webkit-box-orient: inline-axis;
        box-sizing: border-box;
        margin-right: 10px;
    }

    .tile {
        margin: 10px;
        width: 32%;
    }
}

@media all and (min-width: 1281px) {
    .login-tiles {
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -webkit-box-pack: center;
        justify-content: center;
        -moz-box-pack: center;
    }

    .tile {
        margin: 15px;
        width: 395px;
    }
}

.tile-login {
    max-width: 400px;
}

.login-button {
    color: white;
    position: absolute;
    display: block;
    margin-top: 10px;
    right: 5%;
}

.login-form {
    text-align: center;
}

    .login-form input {
        height: 35px;
        width: 80%;
        font-weight: bold;
    }

.mandant-select {
    width: 80%;
    padding: 3px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #f8f8f8;
    color: rgb(117, 72, 2);
    outline: none;
    font-size: 16px;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    height: 35px;
    border: none;
}

.login-tiles .tile-mandant-rss {
    max-width: 400px;
    overflow: hidden;
}

.tile-mandant {
    position: absolute;
    width: 100%;
    height: 100px;
    text-align: center;
    vertical-align: text-bottom;
    top: 0px;
}

    .tile-mandant img {
        display: block;
        max-height: 70px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        max-width: 95%;
    }

.tile-mandant span
{
    font-size:18px;
}

.tile-rss {
    position: absolute;
    overflow-y: scroll;
    top: 115px;
    bottom: 0px;
    width:100%;
}

.news-date {
    width: 80px;
    font-size: 12px;
    float: left;
    margin-top:4px;
}

.news-text {
    font-size: 16px;
    color:white;
    display: block;
    margin-left: 80px;
}

.login-tiles .tile-info {
    max-width: 400px;
}

.tile-info-table {
    margin-top: 15px;
    margin-left: 10px;
}

    .tile-info-table th {
        text-align: left;
        font-size: 14px;
    }

    .tile-info-table td {
        padding-left: 20px;
        font-size: 14px;
    }

.tile-info-footer {
    margin-top: 15px;
    text-align: center;
    width: 100%;
    font-size: 14px;
}

.settings {
    color: white;
    top: 0px;
    right: 0px;
    position: absolute;
}

.login-footer {
    position: absolute;
    height: 200px;
    bottom: 0px;
    width: 100%;
    background: url('../img/hands.png') no-repeat;
    background-clip: border-box;
    background-position-x: center;
}

@media all and (max-height: 600px) {
    .login-footer {
        display: none;
    }

    .login-tiles {
        bottom: 0px;
    }
}

.background-ccdarkblue {
    background-color: rgb(0,74,141);
}

.background-cclightblue {
    background-color: rgb(0,148,216);
}

.background-ccdarkgreen {
    background-color: rgb(0,134,49);
}

.background-ccligthtgreen {
    background-color: rgb(136,186,20);
}

.background-ccdarkpink {
    background-color: rgb(226,0,122);
}

.background-cclightpink {
    background-color: rgb(213,134,180);
}

.background-ccred {
    background-color: rgb(226,0,26);
}

.background-ccorange {
    background-color: rgb(201,100,9);
}

.background-ccyellow {
    background-color: rgb(251,186,0);
}

.settingsOnLogin input {
    width: 400px;
    margin-left: 10px;
}

.settingsOnLogin .one-in-row {
    margin-top: 10px;
}

.deviceID {
    margin-left: 30px;
}

.logout {
    color: white;
    position:absolute;
    display:block;
    margin-top:10px;
    left:10%;
}